<template>
  <div>
    <el-card class="search-card">
      <basic-form
        ref="formData"
        showColon
        defaultExpandStatus
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        :handleClearForm="clearCategorySelect"
        @getFormData="getFormData"
      >
        <CategoryMultipleSelect
          slot="category"
          ref="categoryMultiple"
          @selectCategoryCallback="setFormCateUuids"
        />
      </basic-form>
    </el-card>
    <el-card class="table-card">
      <SkusTable
        showPagination
        :tableHeight="480"
        :actionColWidth="200"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import CategoryMultipleSelect from '@/components/Category/MultipleSelect';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getPagerService } from '@/api/commodity/temporaryPurchasingGoods/latentProductAreaOrderRecord';
import { manageAreaSearchService } from '@/api/public';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    CategoryMultipleSelect,
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
    }
  },
  created () {
    this.setAreaOptions()
    this.getTableData()
  },
  methods: {
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = { ...this.formData, ...this.paginationParams }
      const res = await getPagerService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData?.results ?? [])
      this.setTotalNum(res?.retData?.totalNum ?? 0)
    },
    // 获取关联品类信息
    setFormCateUuids (list) {
      this.formData.categoryLevel4Uuids = list.map(item => item.categoryUuid)
    },
    // 清空品类选择信息
    clearCategorySelect () {
      this.$refs.categoryMultiple.clearSelectResult()
    },
    // 区域下拉集合
    async setAreaOptions () {
      const res = await manageAreaSearchService()
      const index = this.formItems.findIndex(item => item.prop == 'areaId')
      if (index > -1) this.formItems[index].options = res?.retData ?? []
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .table-action {
  margin-right: 0;
}
</style>
